<!--
  智慧社区管理系统 - 紧急联系人
  @author Wu.Liang
  @date 2024-01-01
-->
<template>
    <div class="emergency-contact">
        <el-card>
            <template #header>
                <div class="card-header">
                    <span>紧急联系人</span>
                    <el-button type="primary" @click="handleAdd">新增联系人</el-button>
                </div>
            </template>
            
            <el-table :data="contactList" v-loading="loading" style="width: 100%">
                <el-table-column prop="name" label="联系人姓名" />
                <el-table-column prop="phone" label="联系电话" />
                <el-table-column prop="department" label="所属部门" />
                <el-table-column prop="position" label="职位" />
                <el-table-column prop="emergencyType" label="负责紧急类型" />
                <el-table-column prop="status" label="状态" />
                <el-table-column label="操作" width="200">
                    <template #default="scope">
                        <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const loading = ref(false)
const contactList = ref([])

const handleAdd = () => {
    // 新增联系人
}

const handleEdit = (row: any) => {
    // 编辑联系人
}

const handleDelete = (row: any) => {
    // 删除联系人
}

onMounted(() => {
    // 加载联系人列表
})
</script>

<style scoped>
.emergency-contact {
    padding: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style> 